$(function () {
    // 发送ajax，获取用户的信息
    $.ajax({
        url: "http://localhost:8848/getuserinfo.php",
        type: "GET",
        data: "id=" + localStorage.getItem("uid"),
        dataType: "JSON",
        success: function (data) {
            console.log(data);
            // 方法一，一一添加
            // $("#nickname").html(data.nickname);
            // $("#username").html(data.username);
            // $("#totalmoney").html(data.totalmoney);
            // $("#blockedmoney").html(data.blockedmoney);
            // $("#usablemoney").html(data.usablemoney);
            // $("#lastlogintime").html(data.lastlogintime);

            // 方法二，用循环语句
            for (i in data) {
                //遍历对象 有健名和键值
                // console.log(i)  nickname;   console.log(data[i])  ljl
                /*
                ($("#" + i)[0])  加上[0]是因为把它转成js，才可以看到
                选择的是标签，<span id="lastlogintime"></span>
                然后给每个标签都添加上文字 
                
                */

                $("#" + i).html(data[i]);
            }
            drawImages(data.totalmoney, data.usablemoney, data.blockedmoney);
        }
    })


    // echarts 画图
    function drawImages(total, usable, block) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts-box'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '个人资产统计',
                left: 'right'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: total, name: '总金额' },
                        { value: usable, name: '可用金额' },
                        { value: block, name: '冻结金额' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
})